<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    手机号码: <input type="number" /> <button>发送</button>
    <script>
      //按钮点击之后禁用disabled  为true
      //同时按钮里面内容会变化  注意button里的内容通过innerHTML修改
      //里面秒数是有变化的 因此需要用到定时器
      //定义一个变量,在定时器里面,不断递减
      //如果变量为0说明到了时间,我们需要停止定时器 并且复原按钮初始状态
      var btn = document.querySelector('button');
      var time = 5;
      btn.addEventListener('click', function () {
        //设置按钮禁用
        this.disabled = true;
        //定时器中让 time--
        var timer = setInterval(function () {
          btn.innerText = `还剩${time}秒可以再次发送`;
          time--;
          if (time === -2) {
            clearInterval(timer);
            btn.disabled = false;
            btn.innerText = '发送';
          }
        }, 1000);
      });
    </script>
  </body>
</html>
